<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="16">
            <a-col :span="6">
              <a-form-item label="用户名">
                <a-input v-model="queryParam.username" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="4" style="text-align: right;">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" style="margin-right: 8px" @click="handleSearch">查询</a-button>
                <a-button style="margin-right: 8px" @click="handleReset">重置</a-button>
                <a-button type="primary" style="margin-right: 8px" icon="plus" @click="handleAdd">新增</a-button>
                <!-- <a-button type="primary" @click="handleExport">导出</a-button> -->
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :scroll="{x: true}" :columns="columns" :data="loadData" :pageNum="pageNum"
        :pageSize="pageSize" rowKey="id">
        <div slot="action" slot-scope="text, record">
          <a type="primary" @click="handlePassword(record)">重置密码</a>
          <!-- <a type="primary"  style="margin-left:10px;" @click="handleRole(record)">设置角色</a> -->
        </div>
      </s-table>
    </a-card>
    <user-role ref="userRole" @ok="handleRoleOk" />
    <password-form ref="password" @ok="handlePasswordOk" />

    <AgentUserAddForm ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl" @cancel="handleCancel"
      @ok="handleOk" />

  </page-header-wrapper>
</template>

<script>
  import {
    STable
  } from '@/components'
  import {
    userPassword
  } from '@/api/base'
  import {
    userVipExport
  } from '@/api/export'
  import UserRole from './modules/setrole-form'
  import PasswordForm from './modules/password-form'
  import {
    allotRole
  } from '@/api/role'
  import AgentUserAddForm from './modules/user-add-form'
  import {
    listByPage,
    add,
    update,
    active,
    frozen
  } from '@/api/agentUser'
  export default {
    name: 'TableList',
    components: {
      STable,
      UserRole,
      PasswordForm,
      AgentUserAddForm
    },
    // status 1-激活 2-冻结 3-删除
    data() {
      return {
        queryParam: {},
        pageNum: 1,
        pageSize: 10,
        visible: false,
        mdl: null,
        confirmLoading: false,
        columns: [{
            title: '姓名',
            width: 150,
            dataIndex: 'realName'
          },
          {
            title: '手机号',
            width: 150,
            dataIndex: 'phone'
          },
          {
            title: '推荐人',
            width: 150,
            dataIndex: 'topUserName'
          },
          {
            title: '金币数',
            width: 100,
            dataIndex: 'coin'
          },
          {
            title: '注册时间',
            width: 150,
            dataIndex: 'createTime'
          },
          {
            title: '所属代理商',
            width: 200,
            dataIndex: 'agentName'
          },
          {
            title: '管理员',
            width: 100,
            dataIndex: 'isAgentAdmin',
            customRender: (val) => {
              return val == 1 ? '是' : '否'
            }
          },
          // {
          //   title: '操作',
          //   width: 180,
          //   align: 'fixed',
          //   dataIndex: 'action',
          //   scopedSlots: { customRender: 'action' }
          // }
        ]
      }
    },
    created() {},
    methods: {
      handleAdd() {
        this.mdl = null
        this.$refs.createModal.id = ''
        this.$refs.createModal.realName = ''
        this.$refs.createModal.phone = ''
        this.$refs.createModal.agentId = ''
        this.visible = true
      },
      handleOk() {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            if (values.id > 0) {
              // 修改 e.g.
              update(values).then(res => {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()

                this.$message.info('修改成功')
              }).catch(() => {this.confirmLoading = false})
            } else {
              // 新增
              add(values).then(res => {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()

                this.$message.info('新增成功')
              }).catch(() => {this.confirmLoading = false})
            }
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleSearch(e) {
        this.$refs.table.refresh()
      },
      handlePassword(record) {
        this.$refs.password.visible = true
        this.$refs.password.mdl = {
          ...record
        }
      },
      handleRole(record) {
        this.$refs.userRole.visible = true
        this.$refs.userRole.mdl = {
          realName: record.realName,
          id: record.id,
          op: record.op,
          roleId: record.roleIds && record.roleIds.length && record.roleIds[0] || ''
          // ...record
        }
      },
      handleRoleOk() {
        const form = this.$refs.userRole.form
        form.validateFields((errors, values) => {
          if (!errors) {
            values.userId = values.id
            delete values.id
            allotRole(values).then(res => {
              this.$refs.userRole.visible = false
              this.$message.success('设置成功')
              // 新增/修改 成功时，重载列表
              this.$refs.table.refresh()
              form.resetFields()
            }, () => {
              this.$refs.userRole.visible = false
            })
          }
        })
      },
      handlePasswordOk() {
        const form = this.$refs.password.form
        form.validateFields((errors, values) => {
          if (!errors) {
            userPassword(values).then(res => {
              this.$refs.password.visible = false
              this.$message.success('设置成功')
              // 新增/修改 成功时，重载列表
              this.$refs.table.refresh()
              form.resetFields()
            })
          }
        })
      },
      handleCancel() {
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
      handleExport() {
        if (!this.$refs.table.localDataSource.length) {
          this.$message.warning('列表为空，不能导出')
          return
        }
        userVipExport(this.queryParam)
      },
      handleReset() {
        this.queryParam = {}
        this.$refs.table.refresh()
      },
      loadData(params) {
        return listByPage(Object.assign(params, this.queryParam)).then(res => {
          return res.data
        })
      },
    }
  }
</script>